<template>
	<div class="common-layout">
    <el-container>
      <el-header>
        <officeHeader>

        </officeHeader>
      </el-header>
      <el-main>
        <div class="main">
            <!-- 幻灯 -->
            <el-carousel :interval="5000" arrow="always">
                <el-carousel-item >
                   <img src="/img/1.png"/>
                </el-carousel-item>
                 <el-carousel-item >
                   <img src="/img/2.png"/>
                </el-carousel-item>
                 <el-carousel-item >
                   <img src="/img/3.png"/>
                </el-carousel-item>
          </el-carousel>
          <!-- 卡片 -->
          <el-row>
            <el-col :span="4" :offset="3">
                <el-card :body-style="bodyStyle">
                    <img
                    src="/img/business.png"
                    class="image"
                    />
                    <div style="padding: 14px">
                    <span>业务驱动</span>
                    <div class="bottom">
                        <el-button text class="button">
                            以为为中心，建立业务流程
                        </el-button>
                    </div>
                    </div>
                </el-card> 
            </el-col>
            <el-col :span="4" :offset="3">
                <el-card :body-style="bodyStyle">
                    <img
                    src="/img/data.png"
                    class="image"
                    />
                    <div style="padding: 14px">
                    <span>数据驱动</span>
                    <div class="bottom">
                        <el-button text class="button">以数据分析为决策依据，建立数据驱动</el-button>
                    </div>
                    </div>
                </el-card>  
            </el-col>
             <el-col :span="4" :offset="3">
                <el-card :body-style="bodyStyle">
                    <img
                    src="/img/ai.png"
                    class="image"
                    />
                    <div style="padding: 14px">
                    <span>智能驱动</span>
                    <div class="bottom">
                        <el-button text class="button">以认知和感知的数字手段，驱动信息</el-button>
                    </div>
                    </div>
                </el-card>  
            </el-col>
          </el-row>
          <!-- 语录 -->
          <el-row :gutter="0">
                <el-col :span="18" :offset="3">
                    <el-row :gutter="100">
                            <el-col :span="24" class="xi">
                                <div class="number">
                                    习近平
                                </div>
                                <div class="word">
                                    <span>“</span>
                                    指出发展数字经济是把握新一轮科技革命和产业变革新机遇的战略选择，是新一轮国际竞争重点领域，我们一定要抓住先机，抢占未来发展制高点
                                    <span>”</span>
                                </div>
                            </el-col>
                    </el-row>
                </el-col>
            </el-row>
        </div>
      </el-main>
      <el-footer>
            <officeFooter>

            </officeFooter>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
import officeHeader from '../components/officeHeader.vue';
import officeFooter from '../components/officeFooter.vue';

const bodyStyle ={
    padding: '0',
    textAlign: 'center'
}



export default{
    components: {
    officeHeader,
    officeFooter
},
  data(){
    return{
        bodyStyle,
    }
  }
}
</script>

<style scoped>
.el-header{
  position: fixed;
  width: 100%;
  height: 100px;
  
  margin-left: auto;
}
.el-main{
  margin-top: 87px;
}
.el-footer{
    height: 160px;
}

.main{
    /* margin-top: 87px; */
    /* height: 1000px; */
}


.el-carousel{
    height: 500px;
    width: 100%;
}
.el-carousel__container{
    width: 100%;
    padding: 0;
}
.el-carousel__item{
  line-height: 300px;
  margin: 0;
  text-align: center;
  height: 500px;
  width: 100%;
}

/* 卡片 */

.el-card{
    margin-top: 10px;
}
.image{
    margin-top: 10px;
}

.xi{
    margin-top: 20px;
    margin-bottom: 30px;
}
.number{
    font-size: 30px;
    float: left;
    font-weight: bolder;
}
.word{
    font-size: 18px;
    float: left;
    width: 80%;
    line-height: 30px;
    margin-left: 50px;
}
.word span{
    font-size: 30px;
    font-weight: bolder;
}

</style>